<template>
	<view class="boxx">
		<view class="loading">
			<view class="item"></view>
			<view class="item"></view>
			<view class="item"></view>
			<view class="item"></view>
			<view class="item"></view>
			<view class="item"></view>
			<view class="item"></view>
			<view class="item"></view>
		</view>
	</view>

</template>

<script>
</script>

<style scoped lang="scss">
	// body {
	// 	margin: 0;
	// 	padding: 0;
	// 	background: #0099CC;
	// }
	.boxx{
		width: 100vw;
		height: 100vh;
		background-color: #fff;
		position: fixed;
		/* 居中 */
		top: 0;
		left:0;
	}
	/* 设置位置 */
	.loading {
	
		position: absolute;
		/* 居中 */
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		/* 高度 */
		height: 40px;
		/* 弹性布局 */
		display: flex;
		/* 设置子项在y轴方向居中，应该是设置起点在中间，非常有用，不然动画很怪 */
		align-items: center;
		
	}

	/* 小竖条 */
	.item {
		height: 50px;
		width: 5px;
		background: rgba(254, 93, 73, 1);
		/* 加margin，使竖条之间有空隙 */
		margin: 0px 3px;
		/* 圆角 */
		border-radius: 10px;
		/* 动画：名称、时间、循环 */
		animation: loading 1s infinite;
	}

	/* 设置动画 */
	@keyframes loading {
		0% {
			height: 0px;
		}

		50% {
			height: 50px;
		}

		100% {
			height: 0px;
		}
	}

	/* 为每一个竖条设置延时 */
	.item:nth-child(2) {
		animation-delay: 0.1s;
	}

	.item:nth-child(3) {
		animation-delay: 0.2s;
	}

	.item:nth-child(4) {
		animation-delay: 0.3s;
	}

	.item:nth-child(5) {
		animation-delay: 0.4s;
	}

	.item:nth-child(6) {
		animation-delay: 0.5s;
	}

	.item:nth-child(7) {
		animation-delay: 0.6s;
	}

	.item:nth-child(8) {
		animation-delay: 0.7s;
	}
</style>